<!-- HomeNav.vue -->
<template>
  <div class="">
    <div class="header">
      <nav>
        <div class="container">
          <div class="nav_lis">
            <span :class="this.$store.getters.userInfo ? 'iconfont icon-geren' : ''"></span>
            <span v-if="this.$store.getters.getToken" @click="onPersonal">xiaotuxian001</span>
            <span @click="onLogin" v-else>请先登录</span>
          </div>
          <div class="nav_lis">
            <span v-if="this.$store.getters.getToken" @click="onQuit">退出登录</span>
            <span class="btns" v-else>免费注册</span>
          </div>
          <div class="nav_lis">我的订单</div>
          <div class="nav_lis">会员中心</div>
          <div class="nav_lis">帮助中心</div>
          <div class="nav_lis">关于我们</div>
          <div class="nav_lis">
            <span class="iconfont icon-shouji"></span>手机版
          </div>
        </div>
      </nav>
      <header ref="head">
        <div class="container">
          <h1 class="login"></h1>

          <ul class="app_header_nav">
            <li @click="tabHome">首页</li>
            <li v-for="item in secondaryMenu" :key="item.id">
              <span @click="onOtherPage(item.id, item.name)">{{
                  item.name
              }}</span>
              <div class="box-card">
                <el-card class="card">
                  <div class="card_pr">
                    <div class="item_box" v-for="i in item.children" :key="i.id" @click="onOtherPage2(i.id)">
                      <img :src="i.picture" alt="" />
                      <span>{{ i.name }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </li>
          </ul>

          <div class="search">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜一搜" style="color: #e7e7e7" />
          </div>

          <div class="curr" @click="tabCart">
            <span class="iconfont icon-31gouwuche"></span>
            <span class="badge">11</span>
          </div>
        </div>
      </header>
      <div :class="flag ? 'active' : ''" v-if="flag">
        <div class="container">
          <h1 class="login"></h1>
          <ul class="app_header_nav">
            <li @click="tabHome">首页</li>
            <li v-for="item in secondaryMenu" :key="item.id">
              <span @click="onOtherPage(item.id, item.name)">{{
                  item.name
              }}</span>
              <div class="box-card">
                <el-card class="card">
                  <div class="card_pr">
                    <div class="item_box" v-for="i in item.children" :key="i.id" @click="onOtherPage2(i.id)">
                      <img :src="i.picture" alt="" />
                      <span>{{ i.name }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </li>
          </ul>
          <div class="right">
            <span>品牌</span>
            <span>专辑</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeNav',
  data() {
    return {
      onShow: false,
      secondaryMenu: [],
      spId: '',
      flag: false
    }
  },
  async created() {
    const res = await this.$http.getHome()
    this.secondaryMenu = res.data.result
    if (this.$store.getters.getToken) {
      this.onShow = true
    } else {
      this.onShow = false
    }
  },
  mounted() {
    window.addEventListener('scroll', this.lazyLoading); //监听滚动事件,注意这儿监听的方法不需要括号
  },
  destroyed() {
    window.removeEventListener('scroll', this.lazyLoading);// 页面离开时，删除监听的滚动事件
  },
  methods: {
    onLogin() {
      this.$router.push('/login')
    },
    // 跳转个人页面
    onPersonal() {
      this.$router.push('/personal')
    },
    onAppNavOver(index) {
      //console.log(index)
      if (index === 0) {
        this.curIndex = null
      } else {
        this.curIndex = index
      }
    },
    onAppNavOut() {
      this.curIndex = null
    },
    onOtherPage(id, name) {
      this.$router.push({
        path: '/about1',
        query: {
          id,
          name,
        },
      })
    },
    //二级事件
    onOtherPage2(id) {
      console.log(id)
      this.$router.push({
        path: '/about2',
        query: {
          id,
        },
      })
    },
    onQuit() {
      this.$store.commit('setToken', '')
      this.$router.replace('/login')
    },
    // 跳转购物车
    tabCart() {
      this.$router.push('/cart')
    },
    // 跳转首页
    tabHome() {
      this.$router.push('/')
    },
    async lazyLoading(e) {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop //滚动条高度
      const clientHeight = document.documentElement.clientHeight //屏幕可视区域高度
      // const scrollHeight = document.documentElement.scrollHeight //浏览器所有内容高度
      if (scrollTop > this.$refs.head.offsetTop + this.$refs.head.offsetHeight) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    }
  },
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';
  /* Project id 3702426 */
  src: url('//at.alicdn.com/t/c/font_3702426_zl7tuaz4n6s.woff2?t=1666766560902') format('woff2'),
    url('//at.alicdn.com/t/c/font_3702426_zl7tuaz4n6s.woff?t=1666766560902') format('woff'),
    url('//at.alicdn.com/t/c/font_3702426_zl7tuaz4n6s.ttf?t=1666766560902') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shouji:before {
  content: '\e625';
}

.icon-geren:before {
  content: '\e607';
}

@font-face {
  font-family: 'iconfont';
  /* Project id 3730695 */
  src: url('//at.alicdn.com/t/c/font_3730695_jg318i2gfea.woff2?t=1666769997140') format('woff2'),
    url('//at.alicdn.com/t/c/font_3730695_jg318i2gfea.woff?t=1666769997140') format('woff'),
    url('//at.alicdn.com/t/c/font_3730695_jg318i2gfea.ttf?t=1666769997140') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-31gouwuche:before {
  content: '\e600';
}

.icon-sousuo:before {
  content: '\e632';
}

.header {
  width: 100%;

  nav {
    background-color: #333333;

    .container {
      height: 53px;
      color: #cdcdcd;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .nav_lis {
      padding: 0 15px;
      color: #cdcdcd;
      line-height: 1;
      display: inline-block;
      border-left: 2px solid #666;
      font-size: 14px;
      cursor: pointer;

      .iconfont {
        font-size: 14px;
        margin-right: 2px;
      }

      .nav_lis:hover {
        color: #27ba9b;
      }
    }

    .nav_lis:first-child {
      border: none;
    }
  }

  header {
    height: 132px;
    background-color: #fff;

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 100;

      .login {
        width: 200px;
        height: 132px;
        background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat center 18px / contain;
        cursor: pointer;
      }

      .box-card {
        display: none;
      }

      .app_header_nav {
        display: flex;
        justify-content: space-between;

        li:nth-child(1) {
          cursor: pointer;
        }

        li {
          margin-right: 40px;
          width: 38px;
          text-align: center;
          box-sizing: border-box;
          font-size: 16px;
          line-height: 32px;
          height: 32px;
          display: inline-block;

          span {
            cursor: pointer;
          }

          .box-card {
            width: 1240px;
            position: absolute;
            bottom: -100px;
            left: 0;
            display: none;
            padding-top: 20px;
            flex: 1;

            .card {
              height: 132px;
              padding: 0 70px;
              box-sizing: border-box;
              background-color: #fff;
              box-shadow: 0 0 6px 1px rgba(204, 204, 204, 0.553);

              .card_pr {
                height: 132px;
                display: flex;
                justify-content: start;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
              }

              .item_box {
                width: 110px;
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;

                img {
                  width: 60px;
                  height: 60px;
                }

                span {
                  padding-top: 10px;
                }
              }

              .item_box:hover {
                color: #27ba9b;
              }
            }
          }
        }

        li:hover {
          border-bottom: 1px solid #27ba9b;
        }

        li:hover .box-card {
          display: block;
        }

        li:first-child:hover .box-card {
          display: none;
        }
      }

      .search {
        width: 170px;
        height: 32px;
        border-bottom: 1px solid #e7e7e7;
        position: relative;
        line-height: 32px;

        span {
          width: 18px;
          height: 18px;
          position: absolute;
          left: 0;
          top: 0;
        }

        input {
          outline: none;
          border: none;
          width: 140px;
          margin-left: 15px;
          padding-left: 5px;
          color: #e7e7e7;
          font-size: 14px;
        }
      }

      .curr {
        width: 50px;
        height: 32px;
        position: relative;
        text-align: center;
        box-sizing: border-box;
        padding-top: 4px;
        cursor: pointer;

        span {
          font-size: 26px;
        }

        .badge {
          font-size: 12px;
          position: absolute;
          top: -5px;
          right: 0;
          background-color: #e26237;
          border-radius: 10px;
          color: #fff;
          padding: 1px 4px;
        }
      }
    }
  }

  >div {
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-bottom: 1px solid #e4e4e4;

    .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .login {
        width: 200px;
        height: 80px;
        background: url(http://erabbit.itheima.net/img/logo.0940ebb5.png) no-repeat right 2px;
        background-size: 160px auto;
        cursor: pointer;
      }

      .app_header_nav {
        display: flex;
        justify-content: space-between;

        li:nth-child(1) {
          cursor: pointer;
        }

        li {
          margin-right: 40px;
          width: 38px;
          text-align: center;
          box-sizing: border-box;
          font-size: 16px;
          line-height: 32px;
          height: 32px;
          display: inline-block;

          span {
            cursor: pointer;
          }

          .box-card {
            width: 1240px;
            position: absolute;
            bottom: -125px;
            left: 0;
            display: none;
            padding-top: 20px;
            flex: 1;

            .card {
              height: 132px;
              padding: 0 70px;
              box-sizing: border-box;
              background-color: #fff;
              box-shadow: 0 0 6px 1px rgba(204, 204, 204, 0.553);

              .card_pr {
                height: 132px;
                display: flex;
                justify-content: start;
                align-items: center;
                flex-wrap: wrap;
                font-size: 14px;
              }

              .item_box {
                width: 110px;
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;

                img {
                  width: 60px;
                  height: 60px;
                }

                span {
                  padding-top: 10px;
                }
              }

              .item_box:hover {
                color: #27ba9b;
              }
            }
          }
        }

        li:hover {
          border-bottom: 1px solid #27ba9b;
        }

        li:hover .box-card {
          display: block;
        }

        li:first-child:hover .box-card {
          display: none;
        }
      }

      .right {
        width: 220px;
        display: flex;
        text-align: center;
        padding-left: 40px;
        border-left: 2px solid #27ba9b;
        box-sizing: border-box;
        span {
          width: 38px;
          margin-right: 40px;
          font-size: 16px;
          line-height: 1;
          cursor: pointer;
        }
      }
    }
  }
}

::v-deep .el-card__body {
  padding: 0;
}
</style>
